<!--
 @Author: libing/makeup1122
 @Email: makeup1123@163.com
 @Date: "2020-03-07 15:17:14"
-->
<template>
  <v-container fluid>
    <v-data-iterator
      :loading="tableLoading"
      :items="items"
      :items-per-page.sync="itemsPerPage"
      :page="page"
      :sort-by="sortBy.toLowerCase()"
      :sort-desc="sortDesc"
      hide-default-footer>
     <template v-slot:header>
       <v-toolbar flat class="mb-1">
        <v-text-field
        v-model="searchTitle"
        append-icon="search"
        color="secondary"
        @change="changeHandle"
        dense
        clearable
        flat
        solo-inverted
        hide-details
        :disabled="items.length <= 0"
        label="搜索"/>
        <v-dialog v-model="dialog" min-width="50%" max-width="80%">
           <template v-slot:activator="{ on }">
             <v-btn v-on="on" color="primary" class="mx-5">
               <v-icon>add</v-icon>
               新增素材
             </v-btn>
           </template>
           <v-form ref="dialogForm">
             <v-card class="pa-5 ma-0">
               <v-card-title>新增素材</v-card-title>
               <v-card-subtitle>请先保存素材数据，然后才可进行预览！</v-card-subtitle>
               <MaterialUpload :type="type" v-bind.sync="formData"/>
               <!-- <v-text-field prepend-icon="title" label="文件名称" v-model="formData.filename" disabled placeholder="请先上传附件"></v-text-field> -->
               <v-text-field prepend-icon="title" label="标题" v-model="formData.title" placeholder="请输入标题"></v-text-field>
               <v-text-field prepend-icon="description" label="描述" v-model="formData.digest" placeholder="请输入描述"></v-text-field>
               <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn @click="cancelHandle" :loading="loading">取消</v-btn>
                 <v-btn @click="sumbitHandle" :loading="loading" color="primary">确定</v-btn>
               </v-card-actions>
             </v-card>
           </v-form>
        </v-dialog>
        <slot></slot>
      </v-toolbar>
     </template>
    <template v-slot:default="props">
      <v-row>
        <v-col v-for="item in props.items" :key="item.name" cols="12" sm="6" md="4" lg="3">
          <v-hover v-slot:default="{ hover }">
          <v-card @click="itemClickHandle(item)">
            <v-img :aspect-ratio="16/9" height="200" v-if="item.type === 'image'" :src="item.fileurl">
              <v-expand-transition>
                <div v-if="hover"
                  class="d-flex transition-fast-in-fast-out orange darken-2 v-card--reveal display-3 white--text"
                  style="height: 30%;">
                  <MaterialPreview icon large v-bind="item" class="v-card-hover-btn mx-3"/>
                  <v-tooltip top>
                    <template v-slot:activator="{ on }">
                      <v-btn v-on="on" icon large class="v-card-hover-btn mx-3" color="secondary" @click="itemPreviewHandle(item)"><v-icon x-large>zoom_in</v-icon></v-btn>
                    </template>
                    <span>查看图片</span>
                  </v-tooltip>
                  <v-tooltip top>
                    <template v-slot:activator="{ on }">
                      <v-btn v-on="on" icon large class="v-card-hover-btn mx-3" color="delete" @click="itemDeleteHandle(item)"><v-icon x-large>delete</v-icon></v-btn>
                    </template>
                    <span>删除</span>
                  </v-tooltip>
                </div>
              </v-expand-transition>
            </v-img>
            <v-img :aspect-ratio="16/9" height="200" v-else-if="item.type === 'thumb'" :src="item.fileurl">
              <v-expand-transition>
                <div
                  v-if="hover"
                  class="d-flex transition-fast-in-fast-out orange darken-2 v-card--reveal display-3 white--text"
                  style="height: 30%;">
                  <v-btn icon large class="v-card-hover-btn mx-3" color="secondary" @click="itemPreviewHandle(item)"><v-icon x-large>zoom_in</v-icon></v-btn>
                  <v-btn icon large class="v-card-hover-btn mx-3" color="delete" @click="itemDeleteHandle(item)"><v-icon x-large>delete</v-icon></v-btn>
                </div>
              </v-expand-transition>
            </v-img>
            <video v-else-if="item.type === 'video'" :src="item.fileurl"></video>
            <audio v-else-if="item.type === 'audio'" :src="item.fileurl"></audio>
            <v-img :aspect-ratio="16/9" height="200" v-else></v-img>
            <v-card-title class="pa-2">
              <span class="text-over-one">{{item.title}}</span>
            </v-card-title>
          </v-card>
          </v-hover>
        </v-col>
      </v-row>
    </template>
    <template v-slot:footer>
      <span>共{{itemsTotal}}条数据</span>
      <v-pagination v-model="page" :length="pageLength" @input="fetchData"></v-pagination>
    </template>
    </v-data-iterator>
  </v-container>
</template>
<script>
import * as API from '@/api/admin/wx-material.js'
import MaterialUpload from './MaterialUpload.vue'
// import MaterialPreview from './MaterialPreview.vue'
export default {
  name: 'MaterialList',
  components: { MaterialUpload },
  props: {
    type: {
      type: String,
      required: true
    },
    value: Object
  },
  data: function () {
    return {
      searchTitle: '',
      loading: false,
      tableLoading: true,
      dialog: false,
      items: [],
      itemsPerPage: 10,
      page: 1,
      sortBy: 'id',
      sortDesc: true,
      itemsTotal: 0,
      pageLength: 1,
      formData: {
        title: '',
        digest: '',
        type: this.type,
        filename: '',
        filepath: '',
        fileurl: '',
        filehash: ''
      }
    }
  },
  created: function () {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.tableLoading = true
      API.fetchList({
        sort: this.sortBy,
        descending: this.sortDesc,
        page: this.page,
        page_size: this.itemsPerPage,
        search:
          {
            type: this.type,
            title: this.searchTitle
          }
      }).then(res => {
        this.itemsTotal = res.data.total
        this.pageLength = res.data.last_page
        this.items = res.data.data
      }).finally(() => {
        this.tableLoading = false
      })
    },
    itemClickHandle(item) {
      this.$emit('input', item)
    },
    itemPreviewHandle(item) {
      var img = new Image()
      img.src = item.fileurl
      const _that = this
      img.onload = function() {
        _that.$imagePreview([
          {
            src: item.fileurl,
            w: img.width,
            h: img.height
          }
        ])
      }
    },
    itemDeleteHandle(item) {
      if (confirm('是否确定删除？删除后无法恢复，请慎重！')) {
        API.deleteOne(item.id).then(res => {
          this.fetchData()
          this.$toasted.success(res.data)
        }).catch(err => {
          return Promise.reject(err)
        })
      }
    },
    changeHandle() {
      this.fetchData()
    },
    cancelHandle() {
      this.dialog = false
      this.$refs.dialogForm.reset()
    },
    sumbitHandle() {
      this.loading = true
      API.upload(this.formData).then(res => {
        this.dialog = false
        this.$refs.dialogForm.reset()
        this.formData = this.$options.data().formData
        this.$toasted.success(res.data)
        this.fetchData()
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style>
.text-over-one{
  height: 20px !important;
  font-size: 13px;
  line-height: 20px;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.v-card--reveal {
  align-items: center;
  bottom: 0;
  justify-content: center;
  opacity: 1;
  position: absolute;
  width: 100%;
}
.v-card-hover-btn{
  opacity: 1 !important;
}
</style>
